const Utils = require("./utils.js")
const Evt = require("./event.js")
const {EN,NAV_TYPE} = require("./constant.js")

module.exports = class NavPanel extends Evt{
	/**
	options :{
		wrap:
	}
	**/
	constructor($env,$event){
		super($env,$event)
		this.$event = $event;
		this.$env = $env;

		this.__setting={
			tpl:`<button title="{name}" data-type="{type}" data-action="{action}" id="{id}" class="action-btn iconfont {cla}"></button>`,
			navActions:[
				{id:"power-off",layout:"fixed",name:"关闭",	action:"powerOff",cla:"geo-close icon-power",type:NAV_TYPE.action},
				{id:"point",name:"绘点",						action:"Point", cla:"icon-dot" ,type:NAV_TYPE.paint},
				{id:"curve",name:"曲线",						action:"Curve",cla:"icon-curve" ,type:NAV_TYPE.paint},
				{id:"linend",name:"线段",					action:"Linend",cla:"icon-new_whiteboardlinetype" ,type:NAV_TYPE.paint},
				{id:"rect",name:"矩形",						action:"Rect",cla:"icon-rect" ,type:NAV_TYPE.paint},
				{id:"circle",name:"圆形",					action:"Circle",cla:"icon-circle-form-geometry-radial-record" ,type:NAV_TYPE.paint},
				{id:"ellipse",name:"椭圆",					action:"Ellipse",cla:"icon-ellipse" ,type:NAV_TYPE.paint},
				{id:"arc",name:"圆弧",						action:"Arc",cla:"icon-rotate-stroke" ,type:NAV_TYPE.paint},
				{id:"angle",name:"角度",						action:"Angle",cla:"icon-angle" ,type:NAV_TYPE.paint},
				{id:"polygon",name:"正多边形",				action:"Polygon",cla:"icon-ploygon" ,type:NAV_TYPE.paint},
				{id:"text",name:"文字标注",					action:"DrawText",cla:"icon-TextFontSize" ,type:NAV_TYPE.paint},
				{id:"color-picker",name:"颜色选择器",			action:"ColorPicker",cla:"icon-colors", type:NAV_TYPE.plugin},
				{id:"img-picker",name:"图片选择器",			action:"ImagePicker",cla:"icon-image", type:NAV_TYPE.plugin},
				{id:"undo",name:"回撤",						action:"undraw",cla:"icon-undo",type:NAV_TYPE.action}
			]
		}
		this.render()
		this.bind()
	}
	render(){
		let navPanel = Utils.createDOM("div",{
			id:"nav-action",
			class:"nav-action"
		})
		let avatar = `<label class="geo-avatar iconfont icon-Geometry"></label>`;
		let fixed = Utils.template(this.__setting.tpl,this.__setting.navActions.filter((n)=>n.layout)); 
		let navs = Utils.template(this.__setting.tpl,this.__setting.navActions.filter((n)=>!n.layout));
		navPanel.innerHTML = `${avatar}${fixed}<div class="nav-action-wrap">${navs}</div>`
		this.$dom = navPanel;
		this.$event.emit(EN.append,navPanel)
	}
	updateState(e){
		let prevAction = this.$dom.querySelector(".active");
		prevAction&&prevAction.classList.remove("active")
		e.classList.add("active")
	}
	bind(){
		//draw-panel:undraw
		this.$dom.addEventListener("click",(e)=>{
			let rect = e.target.getBoundingClientRect()
			let dataset = e.target.dataset;
			let action = dataset.action;
			let type = dataset.type;
			if(type===NAV_TYPE.paint){
				this.updateState(e.target)
				this.$event.emit(EN.paint,{name:action,rect});
			}else if(type===NAV_TYPE.plugin){
				this.$event.emit(EN.plugin,{name:action,rect});
			}else if(type===NAV_TYPE.action){
				this.$event.emit(EN.action,{name:action,rect});
			}
		})
	}
}
